<template>
  <a-modal title="人员管理" width="65%" :maskClosable="false" okText="保存" cancelText="取消" :visible="dialog.show"
    @ok="allEvents('sure')" @cancel="allEvents('cancel')" :footer="null">
    <a-form-model ref="form" :rules="dialog.rules" :model="dialog.form" :label-col="{ span: 4, style: 'width:110px;' }"
      :wrapper-col="{ span: 14, style: 'width:calc(100% - 110px)' }" labelAlign="left">
      <a-row :gutter="10">

        <a-col :xl="24" :lg="24" :md="24">
          <a-form-model-item label="头像">
            <img style="width:100px;" :src="dialog.form.headFile&&dialog.form.headFile.previewPath">
          </a-form-model-item>
        </a-col>

        <a-col :xl="12" :lg="12" :md="24">
          <a-form-model-item label="姓名" prop="personName">
            {{dialog.form.personName}}
          </a-form-model-item>
        </a-col>

        <a-col :xl="12" :lg="12" :md="24">
          <a-form-model-item label="性别" prop="sexName">
            {{dialog.form.sexName}}
          </a-form-model-item>
        </a-col>

        <a-col :xl="12" :lg="12" :md="24">
          <a-form-model-item label="出生地" prop="birthPlace">
            {{dialog.form.birthPlace}}
          </a-form-model-item>
        </a-col>

        <a-col :xl="12" :lg="12" :md="24">
          <a-form-model-item label="民族" prop="nation">
            {{dialog.form.nation}}
          </a-form-model-item>
        </a-col>

        <a-col :xl="12" :lg="12" :md="24">
          <a-form-model-item label="出生日期" prop="birthDay">
            {{dialog.form.birthDay}}
          </a-form-model-item>
        </a-col>

        <a-col :xl="12" :lg="12" :md="24">
          <a-form-model-item label="参加工作时间" prop="workTime">
            {{dialog.form.workTime}}
          </a-form-model-item>
        </a-col>

        <a-col :xl="12" :lg="12" :md="24">
          <a-form-model-item label="学历" prop="education">
            {{dialog.form.education}}
          </a-form-model-item>
        </a-col>

        <a-col :xl="12" :lg="12" :md="24">
          <a-form-model-item label="毕业院校及专业" prop="graduateSchoolMajor">
            {{dialog.form.graduateSchoolMajor}}
          </a-form-model-item>
        </a-col>

        <a-col :xl="12" :lg="12" :md="24">
          <a-form-model-item label="项目管理年限" prop="workingYears">
            {{dialog.form.workingYears}}
          </a-form-model-item>
        </a-col>

        <a-col :xl="12" :lg="12" :md="24">
          <a-form-model-item label="技术职称" prop="technicalTitle">
            {{dialog.form.technicalTitle}}
          </a-form-model-item>
        </a-col>

        <a-col :xl="12" :lg="12" :md="24">
          <a-form-model-item label="联系方式" prop="phone">
            {{dialog.form.phone}}
          </a-form-model-item>
        </a-col>

        <a-col :xl="12" :lg="12" :md="24">
          <a-form-model-item label="邮箱" prop="email">
            {{dialog.form.email}}
          </a-form-model-item>
        </a-col>


        <a-col :xl="24" :lg="24" :md="24">
          <a-form-model-item label="资质/执业资格" prop="practiceQualification">
            {{dialog.form.practiceQualification}}
          </a-form-model-item>
        </a-col>

        <a-col :xl="24" :lg="24" :md="24">
          <a-form-model-item label="熟悉专业及特长" prop="professionalExpertise">
            {{dialog.form.professionalExpertise}}
          </a-form-model-item>
        </a-col>

        <a-col :xl="12" :lg="12" :md="24">
          <a-form-model-item label="五小证有效期">
            {{dialog.form.oneStartDate&&dialog.form.oneStartDate + " ~ " +dialog.form.oneEndDate}}
          </a-form-model-item>
        </a-col>

        <a-col :xl="12" :lg="12" :md="24">
          <a-form-model-item label="跟踪卡有效期">
            {{dialog.form.twoStartDate&&dialog.form.twoStartDate + " ~ " +dialog.form.twoEndDate}}
          </a-form-model-item>
        </a-col>

        <a-col :xl="12" :lg="12" :md="24">
          <a-form-model-item label="健康证有效期">
            {{dialog.form.threeStartDate&&dialog.form.threeStartDate + " ~ " +dialog.form.threeEndDate}}
          </a-form-model-item>
        </a-col>

        <a-col :xl="12" :lg="12" :md="24">
          <a-form-model-item label="检测证书有效期">
            {{dialog.form.fourStartDate&&dialog.form.fourStartDate + " ~ " +dialog.form.fourEndDate}}
          </a-form-model-item>
        </a-col>

        <a-col :xl="8" :lg="12" :md="24">
          <a-form-model-item label="五小证">
            <img style="width:100px;" :src="dialog.form.imgList1[0]&&dialog.form.imgList1[0].url">
          </a-form-model-item>
        </a-col>

        <a-col :xl="8" :lg="12" :md="24">
          <a-form-model-item label="跟踪卡">
            <img style="width:100px;" :src="dialog.form.imgList2[0]&&dialog.form.imgList2[0].url">
          </a-form-model-item>
        </a-col>

        <a-col :xl="8" :lg="12" :md="24">
          <a-form-model-item label="健康证">
            <img style="width:100px;" :src="dialog.form.imgList3[0]&&dialog.form.imgList3[0].url">
          </a-form-model-item>
        </a-col>

        <a-col :xl="24" :lg="12" :md="24">
          <a-form-model-item label="无损检测证书">
            <div>
              <img style="width:100px;margin-left:5px;" v-for="(item,index) in dialog.form.imgList4" :key="index"
                :src="item.url">
            </div>

          </a-form-model-item>
        </a-col>
        <a-col :xl="24" :lg="24" :md="24">
          <a-tabs default-active-key="1" v-model="activeTab">
            <a-tab-pane key="1" tab="工作简历">
              <a-table :columns="dialog.columnsWork" :data-source="dialog.form.workResumeList" bordered
                :rowClassName="() => 'rowClassName'" :pagination="false" :rowKey="(record,index) => index"
                :scroll="{ x: '95%', y: 280 }">
              </a-table>
            </a-tab-pane>
            <a-tab-pane key="2" tab="学习简历">
              <a-table :columns="dialog.columnsStudy" :data-source="dialog.form.studyResumesList" bordered
                :pagination="false" :rowKey="(record,index) => index" :scroll="{ x: '95%', y: 280 }">
              </a-table>
            </a-tab-pane>
            <a-tab-pane key="3" tab="培训情况">
              <a-table :columns="dialog.columnsTrain" :data-source="dialog.form.trainingsList" bordered
                :pagination="false" :rowKey="(record,index) => index" :scroll="{ x: '95%', y: 280 }">
              </a-table>
            </a-tab-pane>
            <a-tab-pane key="4" tab="工程项目管理经历">
              <a-table :columns="dialog.columnsProject" :data-source="dialog.form.managementExperienceList" bordered
                :pagination="false" :rowKey="(record,index) => index" :scroll="{ x: '95%', y: 280 }">
              </a-table>
            </a-tab-pane>
          </a-tabs>
        </a-col>
      </a-row>
    </a-form-model>

  </a-modal>
</template>

<script>
  import {
    personnelDetails,
  } from '@/api/system/personnel'

  export default {
    name: 'personnel-details',
    components: {},
    data() {
      return {
        dialog: {
          show: false,
          form: {
            personId: "",
            personName: '',
            sex: undefined,
            birthPlace: '',
            nation: '',
            birthDay: '',
            workTime: '',
            education: undefined,
            graduateSchoolMajor: '',
            workingYears: '',
            technicalTitle: '',
            phone: '',
            email: '',
            practiceQualification: '',
            professionalExpertise: '',
            dataState: 0,
            workResumeList: [],
            studyResumesList: [],
            trainingsList: [],
            managementExperienceList: [],
            headId: "",
            imgList1: [],
            imgList2: [],
            imgList3: [],
            imgList4: [],
          },
          rules: {},
          columnsWork: [
            {
              title: '序号',
              fixed: 'left',
              ellipsis: true,
              width: 61,
              customRender: (text, record, index) => `${index + 1}`,
            },
            {
              title: '开始日期',
              dataIndex: 'startTime',
              ellipsis: true,
            },
            {
              title: '结束日期',
              dataIndex: 'endTime',
              ellipsis: true,
            },
            {
              title: '所在单位',
              dataIndex: 'corporateName',
              ellipsis: true,
            },
            {
              title: '岗位情况',
              dataIndex: 'jobTitle',
              ellipsis: true,
            },
          ],
          columnsStudy: [{
              title: '序号',
              fixed: 'left',
              ellipsis: true,
              width: 61,
              customRender: (text, record, index) => `${index + 1}`,
            },
            {
              title: '开始日期',
              dataIndex: 'startTime',
              ellipsis: true,
            },
            {
              title: '结束日期',
              dataIndex: 'endTime',
              ellipsis: true,
            },
            {
              title: '所在学校',
              dataIndex: 'schoolName',
              ellipsis: true,
            },
            {
              title: '学习情况',
              dataIndex: 'spare1',
              ellipsis: true,
            },
          ],
          columnsTrain: [{
              title: '序号',
              fixed: 'left',
              ellipsis: true,
              width: 61,
              customRender: (text, record, index) => `${index + 1}`,
            },
            {
              title: '开始日期',
              dataIndex: 'startTime',
              ellipsis: true,
            },
            {
              title: '培训情况',
              dataIndex: 'trainContent',
              ellipsis: true,
            },
          ],
          columnsProject: [{
              title: '序号',
              fixed: 'left',
              ellipsis: true,
              width: 61,
              customRender: (text, record, index) => `${index + 1}`,
            },
            {
              title: '开始日期',
              dataIndex: 'startTime',
              ellipsis: true,
            },
            {
              title: '结束日期',
              dataIndex: 'endTime',
              ellipsis: true,
            },
            {
              title: '项目名称',
              dataIndex: 'corporateName',
              ellipsis: true,
            },
            {
              title: '所任岗位',
              dataIndex: 'jobTitle',
              ellipsis: true,
            },
          ],
        },
        activeTab: "1",
      }
    },
    mounted() {},
    methods: {
      showDialog(id) {
        personnelDetails(id).then((res) => {
          this.dialog.show = true
          this.$nextTick(function () {

            res.imgList1 = [];
            res.imgList2 = [];
            res.imgList3 = [];
            res.imgList4 = [];

            res.fileList && res.fileList.forEach(item => {
              if (item.dataType == 1) {
                res.imgList1.push({
                  url: item.previewPath,
                  name: item.accessoryName,
                  id: item.accessoryId,
                })
              }
              if (item.dataType == 2) {
                res.imgList2.push({
                  url: item.previewPath,
                  name: item.accessoryName,
                  id: item.accessoryId,
                })
              }
              if (item.dataType == 3) {
                res.imgList3.push({
                  url: item.previewPath,
                  name: item.accessoryName,
                  id: item.accessoryId,
                })
              }
              if (item.dataType == 4) {
                res.imgList4.push({
                  url: item.previewPath,
                  name: item.accessoryName,
                  id: item.accessoryId,
                })
              }

            });
            this.dialog.form = res
          })
        })
      },
      allEvents(type, param, param1) {
        switch (type) {
          case 'cancel':
            this.dialog.form.personId = '';
            this.dialog.show = false;
            this.$refs.form.resetFields();
            break
        }
      },
    },
  }
</script>

<style lang="less" scoped>
  /deep/ .ant-form-item-children {
    color: #000;
    font-weight: bold;
  }
</style>